{extend name="index/index"}

{block name="body"}
<!--自定义登录样式-->
<style>
    .show_pwd_eye {
        color: #505050;
        font-size: 18px;
        position: absolute;
        padding: 14px 15px 13px 20px;
        cursor: pointer;
        text-shadow: none;
    }

    .login-container form ul li i.layui-icon {
        color: #404040;
        text-shadow: none !important;
    }

    body {
        /*background: url(../static/theme/img/login/login_bg.jpg);*/
        background:#eaeaea;
        background-size: cover;
    }

    .login-container {
        background:#eaeaea;
        background-size: cover;
    }

    .login-container .header {
        text-shadow: none;
    }
    .login-container .footer{
        text-shadow: none;
        color: #313131;
    }
    .login-container .footer a:hover {
        color: #337fce;
    }

    .login-container .footer a, .login-container .footer span {
        color: #313131;
    }

    .login-box {
        display: inline-block !important;
        vertical-align: middle !important;
        width: 400px !important;
        background: #fff !important;
        border-radius: 4px !important;
        padding: 50px 40px 40px !important;
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        box-sizing: border-box !important;
        margin-left: -170px !important;
    }

    .login-container form h2 {
        color: #4c4c4c;
        font-size: 20px;
        font-weight: 600;
        text-shadow: none;
    }

    .login-container form ul li button {
        color: #fff !important;
        background: #2596ea !important;
    }

    .login-container form ul li input {
        color: #212121 !important;
        background: #ffffff !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #212121 !important;
        box-shadow: none !important;
    }

    .login-container form ul li input:hover, .login-container form ul li input:focus, .login-container form ul li input:active, .login-container form ul li input:-webkit-autofill, .login-container form ul li input:-webkit-autofill:hover, .login-container form ul li input:-webkit-autofill:focus, .login-container form ul li input:-webkit-autofill:active {
        text-shadow: none !important;
        box-shadow: none !important;
        -webkit-text-fill-color: #212121 !important;
        -webkit-transition-delay: unset !important;
        -webkit-transition: unset !important;
    }

    .login-container form ul li span {
        letter-spacing: 0;
        color: #d82f34 !important;
        text-shadow: none;
    }

    .login-container form ul li.verify img {
        border-radius: 3px;
        box-shadow: none;
    }

</style>
<!--END-->
<div class="login-container" data-supersized="__ROOT__/static/theme/img/login/login_bg.jpg">
    <div class="header notselect layui-hide-xs">
        <a style="color: #333;" href="{:url('@')}" class="title">{:sysconf('app_name')}<span class="padding-left-5 font-s10">{:sysconf('app_version')}</span></a>
        {notempty name='devmode'}
        <a class="pull-right layui-anim layui-anim-fadein" href='https://gitee.com/zoujingli/ThinkAdmin'>
            <img src='https://gitee.com/zoujingli/ThinkAdmin/widgets/widget_1.svg' alt='Fork me on Gitee'>
        </a>
        {/notempty}
    </div>
    <form data-login-form onsubmit="return false" method="post" class="layui-anim layui-anim-upbit login-box"
          autocomplete="off">
        <h2 class="notselect">系统管理-登录</h2>
        <ul>
            <li class="username">
                <label>
                    <i class="layui-icon layui-icon-username"></i>
                    <input class="layui-input" required pattern="^\S{4,}$" name="username" autofocus autocomplete="off"
                           placeholder="登录账号" title="请输入登录账号">
                </label>
            </li>
            <li class="password">
                <label>
                    <!--                    <i class="layui-icon layui-icon-password"></i>-->
                    <i class="fa fa-eye-slash show_pwd_eye" id="lookPassword" title="显示密码"></i>
                    <input class="layui-input" required pattern="^\S{4,}$" name="password" id="password" maxlength="32"
                           type="password" autocomplete="off" placeholder="登录密码" title="请输入登录密码">
                </label>
            </li>
            <li class="verify layui-hide">
                <label class="inline-block relative">
                    <i class="layui-icon layui-icon-auz"></i>
                    <input class="layui-input" required pattern="^\S{4,}$" name="verify" maxlength="4"
                           autocomplete="off" placeholder="验证码" title="请输入验证码">
                </label>
                <label data-captcha="{:url('admin/login/captcha',[],false)}" data-field-verify="verify"
                       data-field-uniqid="uniqid" data-captcha-type="{$captchaType}"
                       data-captcha-token="{$captchaToken}"></label>
            </li>
            <li class="text-center padding-top-20">
                <button type="submit" class="layui-btn layui-disabled full-width" data-form-loaded="立即登入"  data-ripple="ripple">正在载入</button>
            </li>
        </ul>
    </form>
    <div class="footer notselect">
        {:sysconf('site_copy')}
        {if sysconf('beian')}<span class="padding-5">|</span><a target="_blank" href="http://beian.miit.gov.cn">{:sysconf('beian')}</a>{/if}
        {if sysconf('miitbeian')}<span class="padding-5">|</span><a target="_blank" href="http://beian.miit.gov.cn">{:sysconf('miitbeian')}</a>{/if}
    </div>
</div>
{/block}

{block name='style'}
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<script>if (location.href.indexOf('#') > -1) location.replace(location.href.split('#')[0])</script>
<link rel="stylesheet" href="__ROOT__/static/theme/css/login.css">
{/block}

{block name='script'}
<script src="__ROOT__/static/login.js"></script>
<script src="__ROOT__/static/plugs/supersized/supersized.3.2.7.min.js"></script>
<script>

    /*点击显示密码，切换*/
    $('#lookPassword').click(function () {
        if ($(this).hasClass('fa-eye-slash')) {
            $(this).removeClass('fa-eye-slash');
            $(this).addClass('fa-eye');
            $('#password').attr('type', 'text');
        } else {
            $(this).removeClass('fa-eye');
            $(this).addClass('fa-eye-slash');
            $('#password').attr('type', 'password');
        }
    });
</script>
{/block}
